<template>
  <div class="content">
      <!-- {{ form }} -->
      <TitleComponent mainTitle="视频教程" :subTitle="subTitle" />
      <div class="box">
          <div class="box_header">
              <div class="box_title">{{ subTitle }}</div>
              <div class="pull-right">
                  <el-button type="primary" :icon="Operation" @click="backTolist">列表</el-button>
              </div>
          </div>
          <avue-form ref="formRef" :option="option" v-model="form" @submit="handleSubmit"></avue-form>
      </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from "vue";
import { Operation } from "@element-plus/icons-vue";
import TitleComponent from '@/components/title/index.vue';
import { useRouter, useRoute } from 'vue-router';
import Editor from '@/components/Editor/index.vue';

// 外部传递的列定义数组

// 路由带参数过来

/**
* 列定义数组示例
* 每个对象表示一个表单字段的定义
*
* @typedef {Object} ColumnDefinition
* @property {string} label - 列标题
* @property {string} prop - 对应的数据属性名
* @property {string} [type] - 输入类型，默认为文本输入
* @property {number} [step] - 步长（如果适用于数值类型）
* @property {boolean} [stepStrictly] - 数值
* @property {number} [offset] - 布局偏移量
* @property {number} [span] - 栅格占据的列数
* @property {boolean} [row] - 是否单独一行显示
* @property {number} [min] - 输入值的最小限制
* @property {string} [listType] - 上传图片时使用的图片类型
*/


// 跳转路由
const router = useRouter();
const route = useRoute();
const subTitle = ref("创建");

const backTolist = () => {
  router.push('/content/videoTutorial');
}

const externalColumns = ref([
  {
      label: "名称",
      prop: "name",
      type: "input",
      step: 1,
      stepStrictly: true,
      offset: 4,
      span: 6,
      row: true,
  },
  {
      label: '详情',
      prop: 'message',
      span: 24,
      component: Editor,
  },
  {
      label: "是否发布",
      prop: "disableWithdrawal",
      type: "switch",
      offset: 4,
      row: true,
      value: 0,
  },
  {
      label: '排序',
      prop: 'input',
      span: 12,
      type: 'number',
      controlsPosition: 'top',
  },
]);

const form = ref({});
const option = ref({});

const handleSubmit = (formData, done) => {
  console.log(formData);
  done();
};

// 监听外部传递列定义数组的变化
watchEffect(() => {
  option.value = {
      column: externalColumns.value.map((column) => ({
          label: column.label,
          prop: column.prop,
          type: column.type,
          listType: column.listType,
          offset: 4, // 可根据需要设置其他默认值
          row: true,
          min: column.min, //最小值
          value: column.value,
          disabled: column.disabled, // 禁用
          dicData: column.dicData,
          filterable: column.filterable,
          rules: column.rules,
          labelWidth: column.labelWidth,
          component: column.component,
          controlsPosition: column.controlsPosition,
          // span: column.span,
      })),
  };



  // 根据外部列定义动态设置表单初始值
  form.value = {};
  externalColumns.value.forEach((column) => {
      // console.log(column.prop)
      // form.value[column.prop] = ""; // 根据prop属性初始化表单值
  });
});

// 检查路由参数并调用API请求
onMounted(() => {
  const { index } = route.query;
  if (index) {
      subTitle.value = "编辑";
      // 调用API接口获取数据
  }
});


</script>

<style scoped>
.content {
  background-color: #eff1f7;
}


.box {
  margin: 0 20px;
}

.box_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 30px; */
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #f4f4f4;
  background-color: white;
}

.box_title {
  font-size: 16px;
  line-height: 30px;
}

::v-deep .el-collapse-item__content {
  padding-top: 50px !important;
}
</style>